<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head title="Welcome CreditScore Project">

</h:head>
<h:body>
	<h:form id="form">

		<p:dataGrid id="tableData" var="car" value="#{tableBean.cars}"
			columns="3" rows="12" paginator="true"
			paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
			rowsPerPageTemplate="9,12,15">

			<p:panel header="#{car.name}" style="text-align:center">
				<h:panelGrid columns="1" style="width:100%;" border="0">

					<p:graphicImage value="/images/#{car.manufactor}.jpg" />
					<h:outputText value="#{car.year}" />

					<h:panelGrid columns="3" style="width:30%;margin-left:35%;"
						border="0">
						<p:commandLink update=":form:carDetail"
							oncomplete="carDialog.show()" title="View Detail">
							<h:outputText styleClass="ui-icon ui-icon-search"
								style="margin-left:50%;" />
							<f:setPropertyActionListener value="#{car}"
								target="#{tableBean.selectedCar}" />
						</p:commandLink>

						<p:commandLink onclick="confirmation.show()"
							title="Remove Car(#{car.name})">
							<h:outputText styleClass="ui-icon ui-icon-close"
								style="margin-left:20%;" />
							<f:setPropertyActionListener value="#{car}"
								target="#{tableBean.selectedCar}" />
						</p:commandLink>

						<p:selectBooleanCheckbox id="chkBoxDelete"
							value="#{car.chkDelete}" style="margin-right:25%;" />
					</h:panelGrid>

				</h:panelGrid>
			</p:panel>
			<f:facet name="footer">
				<p:commandButton id="Delete" value="Delete" icon="ui-icon-close"
					update=":form:tableData" style="margin-right:100%;"
					actionListener="#{tableBean.deleteSelectedCar}" />
			</f:facet>
		</p:dataGrid>

		<p:confirmDialog id="confirmDialog"
			message="Are you sure to remove this Car?" header="Confirmation"
			severity="info" widgetVar="confirmation">
			<p:outputPanel id="removeCar" style="text-align:center;"
				layout="block">
				<p:commandButton id="confirm" value="Yes"
					oncomplete="confirmation.hide()"
					actionListener="#{tableBean.removeCar}" update=":form:tableData" />
				<p:commandButton id="decline" value="No"
					onclick="confirmation.hide()" type="button" />
			</p:outputPanel>
		</p:confirmDialog>

		<p:dialog header="Car Detail" widgetVar="carDialog" modal="true">
			<p:outputPanel id="carDetail" style="text-align:center;"
				layout="block">

				<p:graphicImage
					value="/images/#{tableBean.selectedCar.manufactor}.jpg" />

				<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="modelNo" value="Model No: " />
					<h:outputText id="modelNo" value="#{tableBean.selectedCar.name}" />

					<h:outputLabel for="year" value="Year: " />
					<h:outputText id="year" value="#{tableBean.selectedCar.year}" />

					<h:outputLabel for="color" value="Color: " />
					<h:outputText id="color" value="#{tableBean.selectedCar.color}"
						style="color:#{tableBean.selectedCar.color}" />
				</h:panelGrid>
			</p:outputPanel>
		</p:dialog>

	</h:form>

	<p:separator />
	<!-- dataTable -->
	<h:form id="formDataTable">
	     <p:growl id="growl" showDetail="true"/>  
		<p:dataTable id="dataTable" var="car" value="#{dataTableBean.cars}"
			paginator="true" rows="10" widgetVar="carsTable"
			paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
			rowsPerPageTemplate="5,10,15" sortOrder="descending"
			sortBy="#{car.year}" emptyMessage="No cars found with given criteria"
			filteredValue="#{dataTableBean.filteredCars}"
			selection="#{dataTableBean.selectedCar}" selectionMode="single"
			rowKey="#{car.name}">
			
			<p:ajax event="rowSelect" listener="#{dataTableBean.onRowSelect}"   
                    update=":formDataTable:display :formDataTable:growl" oncomplete="carDialog.show()" />  
        	<p:ajax event="rowUnselect" listener="#{dataTableBean.onRowUnselect}" update=":formDataTable:growl"/>  
			
			<f:facet name="header">
				<h:panelGrid columns="1" border="0" width="100%"> 
		          	List of Cars
		          	<p:separator></p:separator>
					<p:outputPanel layout="block" style="text-align:left;">
						<h:outputText value="Search all fields:" />
						<p:inputText id="globalFilter" onkeyup="carsTable.filter()"
							style="width:150px" />
					</p:outputPanel>
				</h:panelGrid>
			</f:facet>
			<p:column headerText="Model" sortBy="#{car.name}"
				footerText="contains" filterMatchMode="contains"
				filterBy="#{car.name}">
				<h:outputText value="#{car.name}" />
			</p:column>

			<p:column headerText="Year" sortBy="#{car.year}"
				footerText="startsWith" filterBy="#{car.year}">
				<h:outputText value="#{car.year}" />
			</p:column>

			<p:column headerText="Manufacturer" sortBy="#{car.manufactor}"
				footerText="exact" filterMatchMode="exact"
				filterOptions="#{dataTableBean.manufacturerOptions}"
				filterBy="#{car.manufactor}">
				<h:outputText value="#{car.manufactor}" />
			</p:column>

			<p:column headerText="Color" sortBy="#{car.color}"
				footerText="endsWith" filterMatchMode="endsWith"
				filterBy="#{car.color}">
				<h:outputText value="#{car.color}" />
			</p:column>
			<p:column headerText="Image" style="text-align:center;">
				<p:graphicImage value="/images/#{car.manufactor}.jpg" />
			</p:column>
			<f:facet name="footer">
				<h:panelGrid columns="2" border="0" width="100%">
					<p:column>
						<p:outputPanel layout="block" style="text-align:left;">
			          		<p:commandButton id="viewButton" value="View"
								icon="ui-icon-search" update=":formDataTable:display"
								oncomplete="carDialog.show()" />
						</p:outputPanel>
		          	</p:column>
					<p:column>
						<p:outputPanel layout="block" style="text-align:right;">
					    In total there are #{fn:length(dataTableBean.cars)} cars
					    </p:outputPanel>
					</p:column>
				</h:panelGrid>
			</f:facet>

		</p:dataTable>

		<p:dialog id="dialog" header="Car Detail" widgetVar="carDialog"
			resizable="false" width="250" showEffect="clip" hideEffect="fold">

			<h:panelGrid id="display" columns="2" cellpadding="4">
				<f:facet name="header">
					<p:graphicImage
						value="/images/#{dataTableBean.selectedCar.manufactor}.jpg" />
				</f:facet>

				<h:outputText value="Model:" />
				<h:outputText value="#{dataTableBean.selectedCar.name}" />

				<h:outputText value="Year:" />
				<h:outputText value="#{dataTableBean.selectedCar.year}" />

				<h:outputText value="Manufacturer:" />
				<h:outputText value="#{dataTableBean.selectedCar.manufactor}" />

				<h:outputText value="Color:" />
				<h:outputText value="#{dataTableBean.selectedCar.color}" style="color:#{dataTableBean.selectedCar.color}"  />
			</h:panelGrid>
		</p:dialog>
	</h:form>
	<p:separator />
	<!-- dataTable dynamic columns-->
	<h:form id="Dynamicform">  
                  
    <h:panelGrid id="grid" columns="3" style="margin-bottom:10px">  
        <h:outputLabel for="template" value="Template:" style="font-weight:bold"/>  
        <p:inputText id="template" value="#{dynamicColumnTableBean.columnTemplate}" size="50"/>  
        <p:commandButton id="btn" update="cars" actionListener="#{dynamicColumnTableBean.updateColumns}" value="Update" process="@parent"/>  
    </h:panelGrid>  
  
    <p:dataTable id="cars" var="car" value="#{dynamicColumnTableBean.cars}" filteredValue="#{dynamicColumnTableBean.filteredCars}">                      
        <p:columns value="#{dynamicColumnTableBean.columns}" var="column" columnIndexVar="colIndex"   
                    sortBy="#{car[column.property]}" filterBy="#{car[column.property]}" >  
            <f:facet name="header">  
              #{column.header}  
            </f:facet>  
              #{car[column.property]}  
        </p:columns>  
      </p:dataTable>  
</h:form>  
                
</h:body>

</html>
